import React from 'react';
import '../../../public/css/delevlop.css'
import {
    NavLink
} from 'react-router-dom'
import { RouteWithSubRoutes } from '../../../router/index'

export default class ApiUse extends React.Component {
    render(){
        const {routes}=this.props
        return (
            <div  style={{'height':'100%'}}>
                <ul className="api-menu-waper pos-abs">
                    {routes.map((e,i)=>(
                        <li  className="api-menu"  key={e.path||i}>
                        <NavLink key={e.path||i} style={{'color':'#354052'}} to={e.routes?e.routes[0].path:e.path}>{e.name}</NavLink>
                        </li>
                    ))}
                </ul>
                <div className='third-right-body' style={{'paddingLeft': '120px'}} >
                {routes.map((route, i) => {
                    return (
                        <RouteWithSubRoutes  style={{'height':'100%'}} key={i} {...route}/>
                    )})
                }

            </div>
            </div>
        )
    }
}